<template>
    <!-- 首页入口 -->
    <div class="home-entry">
      <div class="container">
      <!-- 左侧分类 -->
      <HomeCategory></HomeCategory>
      <!-- 右侧轮播图 -->
      <!-- <XtxSkeleton width="200px" height="200px" bg="red" animated="true"></XtxSkeleton> -->
      <HomeBanner></HomeBanner>
      </div>
    </div>
    <!-- 新鲜好物 -->
    <HomeNew></HomeNew>
    <!-- 人气推荐 -->
    <HomeHot></HomeHot>
    <!-- 使用transition组件 -->
    <!--<button @click="show=true">显示|创建</button>
    <button @click="show=false">隐藏|移除</button>
    <transition>
      <div v-show="show" style="width:100px; height:100px; background:red;"></div>
    </transition> -->
    <!-- 热门品牌 -->
    <HomeBrand></HomeBrand>
    <!-- 首页主体 商品区块 -->
    <HomeProduct></HomeProduct>
    <!-- 最新专题 -->
    <HomeSpecial></HomeSpecial>
</template>

<script>
// import { ref } from 'vue'
import HomeCategory from './components/home-category'
import HomeBanner from './components/home-banner'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeBrand from './components/home-brand.vue'
import HomeProduct from './components/home-product.vue'
import HomeSpecial from './components/home-special.vue'
// import XtxSkeleton from '@/components/library/xtx-skeleton.vue'
export default {
  name: 'HomePage',
  components: {
    HomeCategory, HomeBanner, HomeNew, HomeHot, HomeBrand, HomeProduct, HomeSpecial
  },
  setup () {
    /* const show = ref(true)
    return { show } */
  }
}
</script>

<style lang="less" scoped>
// 进入 v-enter v-enter-active v-enter-to
/* .v-enter-from{
  opacity: 0;
}
.v-enter-active{
  transition: all 2s;
}
.v-enter-to{
  opacity: 1;
}
// 离开 v-leave v-leave-active v-leave-to
.v-leave-from{
  opacity: 1;
}
.v-leave-active{
  transition: all 2s;
}
.v-leave-to{
  opacity: 0;
} */
</style>
